<template>
  <div>
    <chartjs-generate ref="chartjs">
      <div style="width: 50%; margin: 0 auto">
        <canvas id="chart-life-index"> </canvas>
      </div>
    </chartjs-generate>
  </div>
</template>

<script>
import ChartJsGenerate from "@/components/charts/ChartJsGenerate";

export default {
  name: "ChartJsSample",
  data() {
    return {
      instances: {},
      //传入的json数据
      chartData: [],
    };
  },
  created() {
    
  },
  async mounted() {
    // 初始化数据
    await this.getData();
    this.$refs.chartjs.generateChartById(
      "chart-life-index",
      this.chartData
    );
  },
  components: {
    "chartjs-generate": ChartJsGenerate,
  },
  methods: {
    async getData() {
      this.chartData = [
        {
          id: "physical-activity",
          // label
          title: "physical activity",
          // tooltipText
          desc: "",
          // 颜色
          color: "#89BEFECC",
          // 排序
          sort: 0,
          // 分数
          score: 13,
        },
        {
          id: "taste",
          title: "taste",
          desc: "",
          color: "#600D8740",
          sort: 1,
          score: 20,
        },
        {
          id: "acceptance",
          title: "acceptance",
          desc: "",
          color: "#99B191",
          sort: 2,
          score: 50,
        },
      ];
    },
  },
};
</script>

<style>
</style>